<template>
    <div class="gray-body w750" :class="searchArr.length ? '' : 'white-bg'">
        <header>
            <div class="header-box">
                <div class="header-search" style="margin: 7px 10px">
                    <input type="text" class="ser-input" v-model="searchText" placeholder="请输入你要搜索的商品" @keyup.enter="enterSearch" />
                    <i class="ser-i"></i>
                </div>
            </div>
        </header>

        <div :class="themes.theme">
            <div class="search-list" :class="themes.theme">
                <div class="m-tabs">
                    <div class="item" :class="{ on: active == 'recDate' }" @click="defaultList"><span class="txt">默认</span></div>
                    <div
                        class="item arrow"
                        :class="{ 'arrow-up': active == 'buys' && salesSort == 'asc', 'arrow-down': active == 'buys' && salesSort == 'desc' }"
                        @click="salesList"
                    >
                        <span class="txt">销量</span>
                    </div>
                    <!-- <div  class="item arrow"><span class="txt">评论数</span></div> -->
                    <div
                        class="item arrow"
                        :class="{ 'arrow-up': active == 'cash' && priceSort == 'asc', 'arrow-down': active == 'cash' && priceSort == 'desc' }"
                        @click="priceList"
                    >
                        <span class="txt">价格</span>
                    </div>
                    <div class="item" @click="changeType">
                        <img
                            :src="goodsType ? require('@/assets/images/search-col.png') : require('@/assets/images/search-row.png')"
                            alt=""
                            class="mes-img"
                        />
                    </div>
                </div>

                <van-list
                    v-model="paging.loading"
                    :finished="paging.finished"
                    :finished-text="!paging.emptylist ? '没有更多了' : ''"
                    @load="onLoad"
                    :immediate-check="false"
                    :error.sync="paging.error"
                    error-text="请求失败，点击重新加载"
                >
                    <!-- 纵向列表 -->
                    <div class="ser-list" id="list01" v-if="goodsType">
                        <div class="search-con" v-for="(item, index) in searchArr" :key="index" @click="enterGoods(item.prodId)">
                            <div class="pro-mes">
                                <div class="pro-img">
                                    <legend-image
                                        style="border-radius: 5px"
                                        class="w-100 h-100"
                                        :pic="item.pic"
                                        :options="{ w: '120', h: '120' }"
                                        :isJD="item.prodSource == 'JD'"
                                    />

                                    <!-- <img :src="$imgUrlHead + item.pic" alt="" />
                                    <img src="@/assets/images/haitao-small.png" class="haitao" v-if="item.goodsType == 'overseas'" /> -->
                                </div>
                                <div class="pro-name">
                                    <div class="name">{{ item.name }}</div>
                                    <div class="pro-price" v-if="item.firstCommission && item.shareSaleFlagSetting">
                                        预计佣金：
                                        <template v-if="commissionType == 'CASH'">
                                            <span class="price">
                                                ￥
                                                <em class="now">{{ Money(item.firstCommission)[0] }}</em>
                                                .{{ Money(item.firstCommission)[1] }}
                                            </span>
                                        </template>
                                        <template v-if="commissionType == 'INTEGRAL'">
                                            <span class="price">
                                                <em class="now">{{ item.firstCommission }}</em>
                                                {{ integralName }}
                                            </span>
                                        </template>
                                    </div>
                                    <div class="pro-com">
                                        <small class="com-item">商品价格：￥{{ Money(item.price)[0] }}.{{ Money(item.price)[1] }}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 纵向列表 -->

                    <!-- 横向列表 -->
                    <div class="pro-list" id="list02" v-if="!goodsType">
                        <div class="pro-box" v-for="(item, index) in searchArr" :key="index" @click="enterGoods(item.prodId)">
                            <div class="pro-info">
                                <div class="pro-img">
                                    <legend-image
                                        style="border-radius: 5px"
                                        class="w-100 h-100"
                                        :pic="item.pic"
                                        :options="{ w: '120', h: '120' }"
                                        :isJD="item.prodSource == 'JD'"
                                    />
                                </div>
                                <div class="pro-name">{{ item.name }}</div>
                                <div class="pro-price" v-if="item.firstCommission && item.shareSaleFlagSetting">
                                    预计佣金：
                                    <template v-if="commissionType == 'CASH'">
                                        <span class="price">
                                            ￥
                                            <em class="now">{{ Money(item.firstCommission)[0] }}</em>
                                            .{{ Money(item.firstCommission)[1] }}
                                        </span>
                                    </template>
                                    <template v-if="commissionType == 'INTEGRAL'">
                                        <span class="price">
                                            <em class="now">{{ item.firstCommission }}</em>
                                            {{ integralName }}
                                        </span>
                                    </template>
                                </div>
                                <div class="pro-com">
                                    <small class="com-item">商品价格：￥{{ Money(item.price)[0] }}.{{ Money(item.price)[1] }}</small>
                                </div>
                                <img src="@/assets/images/haitao-small.png" class="haitao" v-if="item.goodsType == 'overseas'" />
                            </div>
                        </div>
                    </div>
                    <!-- 横向列表 -->
                </van-list>
                <Noempty v-if="paging.emptylist && !paging.error" :pic="require('../../../assets/images/order-empty.png')" :title="'暂无列表信息'" />
            </div>
        </div>
    </div>
</template>

<script>
import { List } from 'vant'
import Noempty from 'components/Noempty/Noempty'
import { mapState } from 'vuex'
import ProList from 'components/proList/proList'
import SearchCon from 'components/proList/searchCon'
import ready from 'components/loading/loading'
import { store } from 'utils/Cache'
import cash from 'utils/tool'
import { promoteProducts } from 'api/extensionApi'
import legendImage from 'components/legendImage/legendImage'

import PageUtil from 'utils/PageUtil'
const pageUtil = new PageUtil(promoteProducts, {
    field: {
        list: 'searchArr'
    }
})
export default {
    data() {
        return {
            Money: cash,
            goodsType: true, //默認-纵向列表
            searchArr: [], //搜索列表数据
            searchText: '',
            active: 'recDate',
            salesSort: 'asc',
            priceSort: 'asc',
            params: {
                name: '',
                orderDir: 0
            },
            paging: {
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
            commissionType: null
        }
    },
    mounted() {
        let that = this
        this.commissionType = this.$route.query.commissionType
        this.getsearchList(this.params)
    },
    methods: {
        goback() {
            this.$router.back()
            this.$router.isBack = true
        },
        enterGoods(prodId) {
            let goodsInfoId = prodId
            this.$router.push({
                path: `/goodsDetail`,
                query: {
                    goodsInfoId: goodsInfoId
                }
            })
        },
        //商品列表切换模式
        changeType() {
            this.goodsType = !this.goodsType
        },

        //获取列表数据
        getsearchList(params) {
            let that = this
            params.curPageNO = 1
            pageUtil.loadListByPage(that, params)
        },

        //默认
        defaultList() {
            this.active = 'recDate'
            this.params.orderDir = 0
            this.getsearchList(this.params)
        },
        salesList() {
            this.active = 'buys'
            let action = (this.salesSort = this.salesSort == 'asc' ? 'desc' : 'asc')
            this.params.orderDir = action == 'desc' ? -1 : 1
            this.getsearchList(this.params)
            // salesSort
        },
        priceList() {
            this.active = 'cash'
            let action = (this.priceSort = this.priceSort == 'asc' ? 'desc' : 'asc')
            this.params.orderDir = action == 'desc' ? -3 : 3
            this.getsearchList(this.params)
        },

        enterSearch() {
            this.params.name = this.searchText
            this.getsearchList(this.params)
        },

        onLoad() {
            pageUtil.loadListByPageMore()
        }
    },
    computed: {
        ...mapState(['themes']),
        ...mapState(['integralName'])
    },
    components: {
        SearchCon,
        ProList,
        Noempty,
        legendImage
    }
}
</script>

<style src="../../../assets/css/search.css" scoped></style>
<style src="../../../assets/css/style/list-style.css" scoped></style>
<style scoped>
.pro-info .haitao {
    position: absolute;
    top: 0;
    left: 0px;
    width: 40px;
    height: 40px;
}

.pro-info .haitao img {
    width: 100%;
    height: 100%;
    border-radius: 5px 0 0 0;
}

.ser-list .search-con .pro-mes .pro-img .haitao {
    position: absolute;
    top: 0;
    left: 0px;
    width: 30px !important;
    height: 30px !important;
}
.mes-img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-top: -4px;
}
</style>
